import React, { forwardRef, useState, useEffect } from 'react'
import './Veterinary.scss'
// import style from './Animalmanagement.module.css'
import * as echarts from "echarts";
const Veterinary = forwardRef((props, ref) => {
    const [infodata, setdata] = useState([])
    const getdata = () => {
        // setdata(ref)

    }

    const drawbar = () => {
        var myChart = echarts.init(document.getElementById("Veterinary_barli"));
        var option = {
            title: {
                text: "就业热门排名Top3",
                textStyle: {
                    fontSize: 25,
                    color: "rgba(0, 0, 0, 1)"
                },
            },
            color: ['#00DEF2', '#0055F2', '#F27300'],
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(13, 64, 71, 0.50)',
                borderColor: 'rgba(143, 225, 252, 0.60)',
                padding: 8,
                textStyle: {
                    color: '#fff',
                }
            },
            legend: {
                data: ['IT技术', '建筑土木', '护理'],
                icon: 'rect',
                itemWidth: 14,
                itemHeight: 14,
                top: 20,
                right: 15,
                textStyle: {
                    fontSize: 14,
                    color: '#737A85'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '10%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLine: {                     // 轴线设置
                    show: false,                   // 显示轴线
                },
                axisLabel: {
                    textStyle: {
                        color: '#737A85',  //更改坐标轴文字颜色
                        fontSize: 12     //更改坐标轴文字大小
                    }
                },
                data: ['2022.01', '2022.02', '2022.03', '2022.04', '2022.05', '2022.06', '2022.07', '2022.08']
            },
            yAxis: {
                name: '人',
                nameTextStyle: {
                    fontSize: 14
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#737A85',
                        type: 'dashed'
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: '#737A85',  //更改坐标轴文字颜色
                        fontSize: 12     //更改坐标轴文字大小
                    }
                },
            },
            series: [
                {
                    name: 'IT技术',
                    type: 'line',
                    // smooth: true,
                    symbol: 'circle',
                    symbolSize: 10,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 10
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff'
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'RGBA(0, 222, 242, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'RGBA(0, 222, 242, 0)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [100, 132, 122, 134, 190, 185, 201, 220]
                },
                {
                    name: '建筑土木',
                    type: 'line',
                    // smooth: true,
                    symbol: 'circle',
                    symbolSize: 10,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 10
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff'
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'RGBA(0, 85, 242, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'RGBA(0, 85, 242, 0)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [80, 162, 91, 134, 144, 130, 210, 120]
                },
                {
                    name: '护理',
                    type: 'line',
                    // smooth: true,
                    symbol: 'circle',
                    symbolSize: 10,
                    itemStyle: {
                        shadowColor: '#fff',
                        shadowBlur: 10
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: '#fff'
                    },
                    areaStyle: {
                        opacity: 0.8,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'RGBA(242, 115, 0, 0.6)'
                            },
                            {
                                offset: 1,
                                color: 'RGBA(242, 115, 0, 0)'
                            }
                        ])
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [180, 162, 201, 74, 144, 130, 280, 220]
                },
            ]
        };

        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }
    const drawbar2 = () => {
        var myChart = echarts.init(document.getElementById("Veterinary_barli2"));
        var option = option = {
            title: {
                text: "就业热门排名Top3",
                textStyle: {
                    fontSize: 25,
                    color: "rgba(0, 0, 0, 1)"
                },
            },
            grid: {
                containLabel: true,
                bottom: '10%',
                top: '20%',
                left: '5%',
                right: '5%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            legend: {
                top: '8%',
                right: '10%',
                data: ['评价薪资'],
                itemWidth: 18,
                itemHeight: 18,
                itemGap: 30,
                textStyle: {
                    fontSize: 18,
                    color: '#C9D2FA',
                    padding: [0, 0, 0, 10],
                },
            },
            xAxis: {
                // name: "班级",
                triggerEvent: true,
                data: ['IT信息技术', '物流概念了', '电子通信', '服务业', '护理', '餐饮', '监测'],
                axisLabel: {
                    interval: 0,
                    show: true,
                    fontSize: 18,
                    interval: 0,
                    rotate: -30,
                    color: '#29D2FA',
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        show: false,
                        color: '#F3F3F3',
                        width: 2,
                    },
                },
                // axisLabel: {  
                //     interval:0,  
                //     rotate:40  
                //  }  
                axisTick: {
                    show: false,
                },
            },
            yAxis: [
                {
                    // name: '单位:万',
                    // type: 'value',
                    // nameTextStyle: {
                    //   color: '#444444',
                    // },
                    splitNumber: 4,
                    axisLabel: {
                        show: true,
                        fontSize: 18,
                        // color: '#C9D2FA',
                        formatter: function (value) {
                            // 在标签后面添加百分号
                            return value + '%';
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#3E4A82',
                        },
                    },
                },
            ],
            series: [
                {
                    name: '评价薪资',
                    type: 'bar',
                    silent: true,
                    itemStyle: {
                        color: function (params) {
                            if (params.value > 110) {
                                return '#DE4646';
                            } else if (params.value <= 110 && params.value >= 90) {
                                return '#2F8FFF';
                            } else {
                                return '#FF932F';
                            }
                        },
                    },
                    barWidth: 30,
                    data: [96, 108, 150, 89, 94, 89, 94],
                    label: {
                        show: true, // 显示标签
                        position: 'top', // 标签显示在柱状图的上方
                        fontSize: 14,
                        color: '#fff',
                        formatter: function (params) {
                            // 在标签文本后添加百分号
                            return params.value + '%';
                        },
                    },
                    markLine: {
                        symbol: 'none', // 可以设置标记点的样式，这里设置为 'none'
                        lineStyle: {
                            color: '#51D365', // 设置直线的颜色
                            type: 'solid', // 设置直线的类型，可选值有：'solid', 'dashed', 'dotted' 等
                            width: 2, // 设置直线的宽度
                        },
                        data: [
                            {
                                name: '平均线',
                                yAxis: 100,
                                label: {
                                    show: true,
                                    position: 'start', // 设置标签文本的位置为起始位置
                                    color: '#51D365',
                                    formatter: '平均线', // 显示标签文本为 "平均线"
                                },
                            },
                        ],
                        // label: {
                        //   show: false,
                        // },
                        silent: true,
                        // animation: true,
                    },
                },
            ],
        }
        myChart.setOption(option)

        // console.log(timer);
        window.onresize = () => {
            myChart.resize();
        }

    }

    useEffect(() => {
        drawbar()
        drawbar2()
        console.log(infodata);
        getdata()

    }, [])
    // console.log(ref);
    return (
        <div className='Veterinary_showli'>
            {/* {drawlist()} */}
            <div id='Veterinary_barli'></div>
            <div id='Veterinary_barli2'></div>
        </div>
    )
})

export default Veterinary